<template>
	<el-form>
		<el-form-item>
			<el-input type="username" placeholder="账号" v-model="form.username"></el-input>
			<span class="errTips" v-if="usernameError">* 账号填写错误 *</span>
		</el-form-item>
		<el-form-item>
			<el-input type="password" placeholder="密码" v-model="form.userpwd"></el-input>
			<span class="errTips" v-if="passwordError">* 密码填写错误 *</span>
		</el-form-item>
		<el-form-item label="部门">
			<el-select v-model="form.usertype" placeholder="请选择">
				<el-option v-for="item in options" :key="item.roleKey" :label="item.roleName"
					:value="item.roleKey">
				</el-option>
			</el-select>
		</el-form-item>
	</el-form>
</template>

<script>
	import axios from 'axios';
	export default {
		name: "login-register",
		data() {
			return {
				isLogin: false,
				usernameError: false,
				passwordError: false,
				existed: false,
				form: {
					username: "",
					userpwd: "",
					usertype: ""
				},
				options: [{
					roleKey: '选项1',
					roleName: '黄金糕'
				}],
			};
		},
		mounted() {
			this.roles();
		},
		methods: {
			changeType() {
				this.isLogin = !this.isLogin;
				this.form.username = "";
				this.form.userpwd = "";
				this.form.usertype = "";
			},
			roles() {
				axios.get("http://localhost:9003/role/list").then((response) => {
					console.log(response.data);
					this.options = response.data;
				})
			},
			login() {
				const self = this;
				if (self.form.username != "" && self.form.userpwd != "") {
					self.$axios({
							method: 'post',
							url: 'http://localhost:9003/users/login',
							data: {
								userAccount: self.form.username,
								psw: self.form.userpwd,
								type: self.form.usertype
							}
						})
						.then(res => {
							switch (res.data) {
								case 0:
									alert("登陆成功！");
									break;
								case -1:
									this.usernameError = true;
									break;
								case 1:
									this.passwordError = true;
									break;
							}
						})
						.catch(err => {
							console.log(err);
						})
				} else {
					alert("填写不能为空！");
				}
			},
	
		},
	};
</script>

<style>
</style>
